<template>
    <div class="view-wrapper">
        <div class="main" v-loading="mainLoading">
            <div slot="footer" class="dialog-footer">
                <div class="title">抖音积分任务配置</div>
                <el-button type="primary" @click="submitForm" :loading="sumitLoading">保存任务配置</el-button>
            </div>
            <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth">
                <div class="lab_box">
                    <div class="lab_box_head">
                        <div class="lab_box_head_title">注册任务</div>
                        <el-switch v-model="zhuceSwitch" active-text="开" inactive-text="关">
                        </el-switch>
                    </div>
                    <div class="lab_box_main" v-if="zhuceSwitch">
                        <el-form-item label="获得积分类型">
                            椰分
                            <!-- <el-select v-model="value" placeholder="请选择" :style="{ width: inputWidth }">
                                <el-option v-for="item in fileList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select> -->
                        </el-form-item>
                        <el-form-item label="获得积分数值" prop="zhuceValue">
                            <el-input v-model="form.zhuceValue" placeholder="请输入" :style="{ width: inputWidth }" />
                        </el-form-item>
                    </div>
                </div>
                <div class="lab_box">
                    <div class="lab_box_head">
                        <div class="lab_box_head_title">关注主播任务</div>
                        <el-switch v-model="guanzhuzhuboSwitch" active-text="开" inactive-text="关">
                        </el-switch>
                    </div>
                    <div class="lab_box_main" v-if="guanzhuzhuboSwitch" v-for="(item, index) in form.prizeList"
                        :key="index">
                        <el-form-item label="获得积分类型">
                            椰分
                        </el-form-item>
                        <el-form-item label="获得积分数值" :prop="'prizeList.' + index + '.awardIntegralAmount'"
                            :rules="rules.zhuboValue">
                            <el-input v-model="item.awardIntegralAmount" placeholder="请输入"
                                :style="{ width: inputWidth }"></el-input>
                        </el-form-item>
                        <el-form-item label="关注的抖音号" :prop="'prizeList.' + index + '.taskParams'"
                            :rules="rules.account">
                            <el-input v-model="item.taskParams" placeholder="请输入"></el-input>
                        </el-form-item>
                        <div class="tab_operation_d">
                            <el-button @click="addProduct" type="primary" size="" v-if="index == 0">新增关注任务</el-button>
                            <el-button @click="deleteProduct(index)" type="danger" size=""
                                v-if="form.prizeList.length > 1">移除关注任务
                            </el-button>
                        </div>
                    </div>
                </div>
                <!-- <div class="lab_box">
                    <div class="lab_box_head">
                        <div class="lab_box_head_title">分享小程序任务</div>
                        <el-switch v-model="xiaochengxuSwitch" active-text="开" inactive-text="关">
                        </el-switch>
                    </div>
                    <div class="lab_box_main" v-if="xiaochengxuSwitch">
                        <el-form-item label="获得积分类型">
                            椰分
                            
                        </el-form-item>
                        <el-form-item label="获得积分数值" prop="xiaochengxuValue">
                            <el-input v-model="form.xiaochengxuValue" placeholder="请输入" :style="{ width: inputWidth }" />
                        </el-form-item>
                        <el-form-item label="可分享的次数" prop="xiaochengxuCount">
                            <el-input v-model="form.xiaochengxuCount" placeholder="请输入" :style="{ width: inputWidth }" />
                        </el-form-item>
                        <el-form-item label="活动时间：" prop="date">
                            <el-date-picker v-model="form.date" @change="handleTime" type="datetimerange"
                                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="form.xiaochengxuShare">创建新分享任务</el-checkbox>
                            <el-tooltip style="margin-left: 10px;cursor: pointer;" effect="dark"
                                content="勾选创建新分享任务将重置目前分享任务内容，注意分享任务由接口创建不支持修改字" placement="top">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-form-item>
                    </div>
                </div> -->
                <div class="lab_box">
                    <div class="lab_box_head">
                        <div class="lab_box_head_title">加入粉丝群任务</div>
                        <el-switch v-model="fensiqunSwitch" active-text="开" inactive-text="关">
                        </el-switch>
                    </div>
                    <div class="lab_box_main" v-if="fensiqunSwitch">
                        <el-form-item label="获得积分类型">
                            椰分
                        </el-form-item>
                        <el-form-item label="获得积分数值" prop="fensiValue">
                            <el-input v-model="form.fensiValue" placeholder="请输入" :style="{ width: inputWidth }" />
                        </el-form-item>
                        <el-form-item label="粉丝群查询" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入手机号" style="width: 160px;" :disabled="form.fensiId==''?false:true" />
                            <el-button type="primary" style="margin-left: 4px;" @click="getFansGroupLs" v-if="fanBaseLs.length==0">查询</el-button>
                            <el-button type="danger" style="margin-left: 4px;" @click="deleteView" v-if="fanBaseLs.length!=0">删除</el-button>
                        </el-form-item>
                        <el-form-item label="加入的粉丝群id" prop="fensiId">
                            <el-select v-model="form.fensiId" placeholder="请选择" :style="{ width: inputWidth }">
                                <el-option v-for="item in fanBaseLs" :key="item.groupId" :label="item.groupName"
                                    :value="item.groupId">
                                </el-option>
                            </el-select>
                            <el-tooltip style="margin-left: 10px;cursor: pointer;" effect="dark"
                                content="请达人在抖音小程序登录注册神椰账号后在输入手机号查询" placement="top">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import {
    getToken
} from "@/utils/auth";
import {
    getDouyinIntegral,
    putDouYinIntegral,
    fansGroupLs,
} from "@/api/consumeMiningManagement/dyIntegralTask.js";

export default {
    data() {
        var inspectZhuCeValue = (rule, value, callback) => { //注册积分数值 校验
            let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
            if (regNumber.test(value) == false || value == '0.00' || value == '0.0') {
                return callback(new Error('请输入大于0且最多保留两位小数的数值'));
            } else {
                return callback()
            }
        };
        var inspectZhuBoValue = (rule, value, callback) => { //主播积分数值 校验
            let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
            if (regNumber.test(value) == false || value == '0.00' || value == '0.0') {
                return callback(new Error('请输入大于0且最多保留两位小数的数值'));
            } else {
                return callback()
            }
        };
        var inspectXiaochengxuValue = (rule, value, callback) => { //小程序积分数值 校验
            let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
            if (regNumber.test(value) == false || value == '0.00' || value == '0.0') {
                return callback(new Error('请输入大于0且最多保留两位小数的数值'));
            } else {
                return callback()
            }
        };
        var inspectFensiValue = (rule, value, callback) => { //粉丝积分数值 校验
            let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
            if (regNumber.test(value) == false || value == '0.00' || value == '0.0') {
                return callback(new Error('请输入大于0且最多保留两位小数的数值'));
            } else {
                return callback()
            }
        };
        return {
            labelWidth: '150px',
            inputWidth: '230px',
            sumitLoading: false,
            mainLoading: false,//
            zhuceSwitch: true,
            guanzhuzhuboSwitch: true,
            xiaochengxuSwitch: true,
            fensiqunSwitch: true,
            fanBaseLs: [],//粉丝群数组
            detailLs: [],
            // 表单参数
            form: {
                id: null, //空投id,编辑的时候传
                prizeList: [ //产品详情数组
                    {
                        awardIntegralAmount: "", //积分数量
                        taskParams: "", //抖音号
                        awardIntegralType: 1,//奖励积分类型 1 椰分
                    }
                ],
                zhuceValue: '',
                xiaochengxuValue: '',
                xiaochengxuCount: '',
                xiaochengxuStartTime: '',
                xiaochengxuEndTime: '',
                xiaochengxuShare: 'false',
                fensiValue: '',
                fensiId: '',
                date: [],
                phone: '',
            },
            // 表单校验
            rules: {
                account: [{
                    required: true,
                    message: "请输入关注的抖音号",
                    trigger: ["change", "bulr"]
                }],
                xiaochengxuCount: [{
                    required: true,
                    message: "请输入分享次数",
                    trigger: ["change", "bulr"]
                }],
                fensiId: [{
                    required: true,
                    message: "请输入粉丝群Id",
                    trigger: ["change", "bulr"]
                }],
                zhuceValue: [{
                    required: true,
                    validator: inspectZhuCeValue,
                    trigger: ['change', 'bulr'],
                }],
                zhuboValue: [{
                    required: true,
                    validator: inspectZhuBoValue,
                    trigger: ['change', 'bulr'],
                }],
                xiaochengxuValue: [{
                    required: true,
                    validator: inspectXiaochengxuValue,
                    trigger: ['change', 'bulr'],
                }],
                fensiValue: [{
                    required: true,
                    validator: inspectFensiValue,
                    trigger: ['change', 'bulr'],
                }],
                date: [{
                    required: true,
                    message: "请选择活动时间",
                    trigger: "change"
                }],
                phone: [{
                    required: true,
                    message: "请输入手机号",
                    trigger: ["change", "bulr"]
                }],
            },
        };
    },

    created() {
        this.getDouyinIntegral()
    },
    methods: {
        addProduct() {
            //添加产品
            this.form.prizeList.push({
                awardIntegralAmount: "",
                taskParams: "",
                awardIntegralType: 1,//奖励积分类型 1 椰分
            });
        },
        deleteProduct(index) {
            //删除产品
            this.form.prizeList.splice(index, 1);
        },
        // 时间切换
        handleTime(e) {
            this.form.xiaochengxuStartTime = this.date[0]
            this.form.xiaochengxuEndTime = this.date[1]
        },
        //获取粉丝群下拉数据
        getFansGroupLs() {
            if (this.form.phone == '') {
                this.$message.error('请输入手机号');
                return
            }
            var data = {
                phone: this.form.phone
            }
            fansGroupLs(data).then(res => {
                this.fanBaseLs = res.result
            })
        },
        //删除手机号码
        deleteView(){
            this.form.phone = ''
            this.fanBaseLs = []
            this.form.fensiId = ''
        },
        //获取详情
        getDouyinIntegral() {
            this.mainLoading = true
            getDouyinIntegral().then(response => {
                //任务类型 1注册任务 2 关注主播 3分享小程序任务 4加入粉丝群任务
                //taskStatus 任务状态 1 开启 2关闭
                this.detailLs = response.result
                response.result.forEach(item => {
                    //1注册任务
                    if (item.taskType == 1) {
                        if (item.taskStatus == 1) {
                            this.zhuceSwitch = true
                            this.form.zhuceValue = item.taskParamsList[0].awardIntegralAmount
                        } else
                            this.zhuceSwitch = false
                    }
                    //2 关注主播
                    if (item.taskType == 2) {
                        if (item.taskStatus == 1) {
                            this.guanzhuzhuboSwitch = true
                            this.form.prizeList = item.taskParamsList
                        } else
                            this.guanzhuzhuboSwitch = false
                    }
                    //3分享小程序任务
                    // if (item.taskType == 3) {
                    //     if (item.taskStatus == 1) {
                    //         this.xiaochengxuSwitch = true
                    //         this.form.xiaochengxuValue = item.taskParamsList[0].awardIntegralAmount
                    //         this.form.xiaochengxuCount = item.taskParamsList[0].taskParams
                    //         if (item.isCreateShare == 1) {
                    //             this.form.xiaochengxuShare = true
                    //         } else
                    //             this.form.xiaochengxuShare = false
                    //         this.form.xiaochengxuStartTime = item.taskParamsList[0].startTime
                    //         this.form.xiaochengxuEndTime = item.taskParamsList[0].endTime
                    //         this.form.date = [this.form.xiaochengxuStartTime, this.form.xiaochengxuEndTime]
                    //     } else
                    //         this.xiaochengxuSwitch = false
                    // }
                    //4加入粉丝群任务
                    if (item.taskType == 4) {
                        if (item.taskStatus == 1) {
                            this.fensiqunSwitch = true
                            this.form.fensiValue = item.taskParamsList[0].awardIntegralAmount
                            let str = item.taskParamsList[0].taskParams
                            var obj = JSON.parse(str);
                            if (obj.phone != '') {
                                this.form.phone = obj.phone
                                var data = {
                                    phone: obj.phone
                                }
                                fansGroupLs(data).then(res => {
                                    this.fanBaseLs = res.result
                                    this.form.fensiId = obj.groupId
                                })
                            }
                        } else
                            this.fensiqunSwitch = false
                    }
                })
                this.mainLoading = false
            }).catch(()=>{
                this.mainLoading = false
            })
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    //注册
                    var data = []
                    if (this.zhuceSwitch) {
                        var id = ''
                        this.detailLs.forEach((item) => {
                            if (item.taskType == 1) {
                                id = item.id
                            }
                        })
                        var taskParamsList = [{
                            awardIntegralAmount: this.form.zhuceValue,
                            awardIntegralType: '1',
                            endTime: '',
                            startTime: '',
                            taskParams: '',
                        }]
                        var bean = {
                            id: id,
                            taskParamsList: taskParamsList,
                            taskType: '1',
                            taskStatus: '1',
                            isCreateShare: '',
                        }
                        data.push(bean);
                    } else {
                        var id = ''
                        this.detailLs.forEach((item) => {
                            if (item.taskType == 1) {
                                id = item.id
                            }
                        })
                        var taskParamsList = [{
                            awardIntegralAmount: this.form.zhuceValue,
                            awardIntegralType: '1',
                            endTime: '',
                            startTime: '',
                            taskParams: '',
                        }]
                        var bean = {
                            id: id,
                            taskParamsList: taskParamsList,
                            taskType: '1',
                            taskStatus: '2',
                            isCreateShare: '',
                        }
                        data.push(bean);
                    }
                    //主播
                    if (this.guanzhuzhuboSwitch) {
                        var id = ''
                        this.detailLs.forEach((item) => {
                            if (item.taskType == 2) {
                                id = item.id
                            }
                        })
                        // var taskParamsList = this.form.prizeList
                        var bean = {
                            id: id,
                            taskParamsList: this.form.prizeList,
                            taskType: '2',
                            taskStatus: '1',
                            isCreateShare: '',
                        }
                        data.push(bean);
                    } else {
                        var id = ''
                        this.detailLs.forEach((item) => {
                            if (item.taskType == 2) {
                                id = item.id
                            }
                        })
                        var bean = {
                            id: id,
                            taskParamsList: this.form.prizeList,
                            taskType: '2',
                            taskStatus: '2',
                            isCreateShare: '',
                        }
                        data.push(bean);
                    }
                    //小程序
                    // if (this.xiaochengxuSwitch) {
                    //     var taskParamsList = [{
                    //         awardIntegralAmount: this.form.xiaochengxuValue,
                    //         awardIntegralType: '1',
                    //         endTime: this.form.xiaochengxuEndTime,
                    //         startTime: this.form.xiaochengxuStartTime,
                    //         taskParams: this.form.xiaochengxuCount,
                    //     }]
                    //     var isCreateShare = ''
                    //     if (this.form.xiaochengxuShare) {
                    //         isCreateShare = 1
                    //     } else
                    //         isCreateShare = 2
                    //     var bean = {
                    //         taskParamsList: taskParamsList,
                    //         taskType: '3',
                    //         taskStatus: '1',
                    //         isCreateShare: isCreateShare,
                    //     }
                    //     data.push(bean);
                    // } else {
                    //     var bean = {
                    //         taskParamsList: [],
                    //         taskType: '3',
                    //         taskStatus: '2',
                    //         isCreateShare: '2',
                    //     }
                    //     data.push(bean);
                    // }
                    //粉丝群
                    if (this.fensiqunSwitch) {
                        var id = ''
                        this.detailLs.forEach((item) => {
                            if (item.taskType == 4) {
                                id = item.id
                            }
                        })
                        var obj = {
                            phone: this.form.phone,
                            groupId: this.form.fensiId,
                        }
                        var jsonString = JSON.stringify(obj);
                        var taskParamsList = [{
                            awardIntegralAmount: this.form.fensiValue,
                            awardIntegralType: '1',
                            endTime: '',
                            startTime: '',
                            taskParams: jsonString,
                        }]

                        var bean = {
                            id: id,
                            taskParamsList: taskParamsList,
                            taskType: '4',
                            taskStatus: '1',
                            isCreateShare: '',
                        }
                        data.push(bean);
                    } else {
                        var id = ''
                        this.detailLs.forEach((item) => {
                            if (item.taskType == 4) {
                                id = item.id
                            }
                        })
                        var taskParamsList = [{
                            awardIntegralAmount: this.form.fensiValue,
                            awardIntegralType: '1',
                            endTime: '',
                            startTime: '',
                            taskParams: jsonString,
                        }]
                        var bean = {
                            id: id,
                            taskParamsList: taskParamsList,
                            taskType: '4',
                            taskStatus: '2',
                            isCreateShare: '',
                        }
                        data.push(bean);
                    }
                    this.sumitLoading = true
                    putDouYinIntegral(data).then(response => {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                        this.getDouyinIntegral()
                        setTimeout(()=>{
                            this.sumitLoading = false
                        },800)
                    }).catch(()=>{
                        this.sumitLoading = false
                    })
                }
            });
        },
    }
};

</script>

<style scoped>
.view-wrapper {
    padding: 20px;
    background: #F3F5F7;
}

.main {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}

.dialog-footer {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
}

.title {
    font-weight: bold;
    margin-right: 20px;
}

.lab_box {
    padding: 30px 0 20px;
    border-bottom: 1px solid #cccccc;
}

.lab_box_head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.lab_box_head_title {
    border-left: 3px solid #1890FF;
    padding: 0 10px 0 8px;
}

.lab_box_main {
    display: flex;
    flex-wrap: wrap;
}

.tab_operation_d {
    margin-left: 10px;
}
</style>